<template>
  <div class="every">
    <div class="headerTop clearfix">
      <img src="../../assets/3king/断货王/back.png" alt="" class="back" @click="doBack">
      <span class="font_d tc">确认订单</span>
    </div>

    <div class="red-b">
      <div class="honglan">
        <img src="../../assets/4cart/honglan.png" alt="">
      </div>
      <div class="content">
        <img src="../../assets/4cart/add.png" alt="">
        <span>添加收货地址</span>
      </div>
      <div class="honglan">
        <img src="../../assets/4cart/honglan.png" alt="">
      </div>
    </div>
    <div class="point">
      <img src="../../assets/4cart/wujiaoxingbian.png" alt="">
    </div>
    <div class="sea">
      <div class="just">
        海外直邮订单
      </div>
      <div class="breath">
        <div class="mifen">
          <img src="../../assets/4cart/mifen.png" alt="">
        </div>
        <div class="pic">
          <div class="pic-1">会呼吸丝滑蜜粉</div>
          <div class="pic-2">规格:蜜粉</div>
          <div class="pic-3">
            <span class="money">¥166.06</span>
            <span class="shu">X 1 件</span>
          </div>
        </div>
      </div>
      <div class="duo">
        显示另外1件（共2件）↓
      </div>
    </div>
    <div class="four">
      <div class="shopping">
        <span class="gold">商品金额:</span>
        <span class="dol">¥332.12</span>
      </div>
      <div class="shopping">
        <span class="gold">订单费用:</span>
        <span class="dol">¥50.00</span>
      </div>
      <div class="shopping">
        <span class="gold">关税:</span>
        <span class="dol">¥10</span>
      </div>
      <div class="shopping">
        <span class="gold">订单金额:</span>
        <span class="dol">¥392.12</span>
      </div>
      <div class="warn">
        <span class="w-1">安全提醒:</span>
        <span class="w-2">付款成功后，阿拉灯不会以付款异常、卡单、系统
升级为由联系您。请勿泄露银行卡号、手机验证码，否则会造成
钱款的损失。如有疑问请咨询客服，谨防电话诈骗！</span>
      </div>
    </div>
    <div class="japan">
      <span>配送方式:</span>
      <span class="j-1">日本直邮</span>
    </div>
    <div class="last">
      <div class="last-1">
        <span class="piu-1">共2件商品</span>
        <span class="piu-2">
          应付:
          <span class="reds">¥392.12</span>
        </span>
      </div>
      <div class="duihao">
          <img src="../../assets/4cart/duihao.png" alt="">
          <span>
            本人同意并接受
            <span class="biu">《个人委托协议》</span>
            和
            <span class="biu">《用户协议》</span>
          </span>
      </div>
      <router-link to="/dingdan">
        <div class="yes">确认</div>
      </router-link>
    </div>
  </div>
</template>
<script>
  export default {
    methods: {
      doBack(){
        this.$router.go(-1)
      }
    }
  }
</script>
<style scoped>
  .headerTop{
    background: #e53e42;
    line-height: 2.13rem;
    text-align: center;
  }
  .back{
    width: 0.51rem;
    margin-left: 0.44rem;
    margin-top: 0.67rem;
    float: left;
  }
  .font_d{
    font-size: 0.8rem;
    color: #fff
  }
  .red-b{
    background: white;
    font-size: 0.62rem;
  }
  .content img{
    width: 1.07rem;
    margin: 0.3rem 0.5rem;
  }
  .honglan img{
    height: 0.22rem;
  }
  .point{
    margin-bottom: 0.44rem;
  }
  .point img{
    height: 2.71rem;
  }
  .breath{
    display: flex;
    border-bottom: 1px solid gainsboro;
  }
  .sea{
    background: white;
    margin-bottom: 0.53rem;
  }
  .just{
    padding: 0.5rem;
    font-size: 0.67rem;
    border-bottom: 1px solid gainsboro;
  }
  .mifen{
    padding: 1rem;
  }
  .mifen img{
    width: 2rem;
  }
  .pic-1{
    font-size: 0.67rem;
    color: #4d4d4d;
    margin-bottom: 0.5rem;
  }
  .pic-2{
    font-size: 0.53rem;
    color: #666666;
    margin-bottom: 0.8rem;
  }
  .money{
    color: red;
    font-size: 0.53rem;
    margin-right: 0.8rem;
  }
  .shu{
    font-size: 0.67rem;
    color: #666666;
  }
  .duo{
    font-size: 0.62rem;
    color: #666666;
    text-align: center;
    padding: 0.5rem;
  }
  .four{
    background: white;

  }
  .shopping{
    font-size: 0.62rem;
    padding: 0.53rem;
    border-bottom: 1px solid gainsboro;
    overflow: hidden;
  }
  .dol{
    float: right;
    color: red;
  }
  .warn{
    padding: 0.53rem;
  }
  .w-1{
    font-size: 0.67rem;
    color: red;
    margin-right: 0.3rem;
  }
  .w-2{
    font-size: 0.53rem;
    color: #666666;
  }
  .japan{
    font-size: 0.62rem;
    padding: 0.53rem;
    background: white;
    margin-top: 0.53rem;
    margin-bottom: 1rem;
    overflow: hidden;
  }
  .j-1{
    float: right;
  }
  .last{
    padding: 0.53rem 0.53rem 0 0.53rem;
    background: white;
    font-size: 0.62rem;
  }
  .last-1{
    margin-bottom: 0.83rem;
  }
  .piu-2{
    float: right;
  }
  .reds{
    color: red;
    margin-left: 0.33rem;
  }
  .duihao{
    font-size: 0.62rem;
  }
  .duihao img{
    width: 0.67rem;
    vertical-align: -0.1rem;
  }
  .biu{
    color: red;
  }
  .yes{
    text-align: center;
    margin-top: 0.33rem;
    padding: 0.22rem;
    background: red;
    border-radius: 0.86rem;
    color: white;
  }
</style>
